<template>
	<view>
		图片上传与预览、与条件注释的应用、组件的使用
		<button type="default" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :src="item" @click="preImg(item)"></image>
		<!-- #ifdef H5 -->
			<view>这一段代码仅H5页面可见</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
			<view>这一段代码仅微信小程序页面可见</view>
		<!-- #endif -->
		<view>
		    <calendar 
		    :insert="true"
		    :lunar="true" 
		    :start-date="'2020-7-6'"
		    :end-date="'2020-12-31'"
		    @change="change"
		     />
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		onShow() {
			// #ifdef H5
			console.log("此段日志仅H5打印...");
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log("此段日志仅微信小程序打印...");
			// #endif
		},
		methods: {
			chooseImg(){
				uni.chooseImage({
					count: 4,	//浏览器无效
					success:res =>{
						console.log(res);
						this.imgArr = res.tempFilePaths;
					}
				})
			},
			preImg(current){
				uni.previewImage({
					current,	//正规写法current:current。但这里由于键值相同，故省略。
					urls:this.imgArr,
					loop:true	,//循环播放	仅适用于app
					indicator:'number'	//仅适用于app
				})
			},
			change(e){
				console.log('日期切换..',e);
			}
		},
		components:{
			calendar: uniCalendar
		}
	}
</script>

<style>
	/* H5样式 */
	/* #ifdef H5 */
	view{
		color: #007AFF;
	}
	/* #endif */
	
	/* 微信小程序样式 */
	/* #ifdef MP-WEIXIN */
	view{
		color: #4CD964;
	}
	/* #endif */
</style>
